<template>
  <view v-if="component.column === 'single'" class="product-list single">
    <product-block-single
      v-for="(product, index) in productList"
      :key="index"
      :product="product"
      sub="quantity"
      @click="$emit('click-product', product)"
    />
  </view>
  <view v-else-if="component.column === 'double'" class="product-list double">
    <product-block-double
      v-for="(product, index) in productList"
      :key="index"
      :product="product"
      sub="quantity"
      @click="$emit('click-product', product)"
    />
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import ProductBlockDouble from './product-block-double.vue';
import ProductBlockSingle from './product-block-single.vue';

const props = defineProps<{
  spuList?: SpuVO[];
  component: StorePageProductItem;
}>();

defineEmits<{
  'click-product': [product: SpuVO];
}>();

const productList = computed(() => {
  const list: SpuVO[] = [];
  for (let i = 0; i < props.component.productList.length; i += 1) {
    const item = props.component.productList[i];
    const product = props.spuList?.find((spu) => spu.id === item);
    if (product) {
      list.push(product);
    }
  }
  return list;
});
</script>

<style lang="scss" scoped>
.product-list {
  &.single {
    display: flex;
    flex-direction: column;
    gap: 12rpx;
    padding: 12rpx;
  }
  &.double {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx 0;
    padding: 12rpx 24rpx;
    justify-content: space-between;
  }
}
</style>
